<template>
    <div>
        <van-nav-bar title="搜索" left-arrow @click-left="() => { $router.push('/') }" />
    </div>
    <div>
        <van-search v-model="search_Name" show-action label="" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
    </div>

    <div v-show="Yincang">
        <div style="position: relative;">
            <h3 style="margin-left: 10px; margin-top: 40px;">历史搜索</h3>
            <span style="position: absolute; right: 20px; top: 15px; font-size: 20px;"><van-icon
                    name="delete-o" /></span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">电视机</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">液晶电视</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">液晶屏幕</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">智能手机</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">苹果手机</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">华为手机</span>
        </div>
        <div>
            <h3 style="margin-left: 10px; margin-top: 40px;">热门搜索</h3>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">手机电池</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">MP3</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">摄像机</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">液晶电视</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">录音笔</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">电脑桌</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">衣柜</span>
            <span
                style="width: 80px; height: 35px; border: 1px solid gainsboro; border-radius: 5px;display: inline-block; background-color: gainsboro; text-align: center; line-height: 35px;margin: 10px;">双人床</span>
        </div>
    </div>
    <div v-show="!Yincang">
        <div>
            <van-cell-group v-for="item in searchData">
                <van-cell :title="item.goods_name" />
            </van-cell-group>
        </div>

        <div v-show="Kong">
            <van-empty image="search" description="我已经被您看光了!" />
        </div>
    </div>

</template>

<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api';
import _ from 'lodash';
const searchData = ref([])
const search_Name = ref('')
const Yincang = ref(true)
const Kong = ref(false)
watch(search_Name, _.debounce((value) => {
    console.log('搜索内容', value);
    if (value.length == 0) {
        Yincang.value = true

    }
    else {
        Yincang.value = false
        qsearchApi(value).then(res => {
            console.log('搜索数据', res);
            searchData.value = res.data.message
            if (searchData.value.length == 0) {
                 Kong.value = true
            }
            else
            {
                 Kong.value = false

            }
        })
    }
},2000))
</script>

<style lang="scss" scoped></style>